<template>
	<view class="jobProgressPresent">
		<span>目前进展</span>
		
		
		<!-- 已取消 -->
		<view class="progress" v-if="status==1">
			<view class="subsection">
				<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/yiquxiao@2x.png" alt="">
			</view>
			<view class="subsection2" id="b4">
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2xdd.png" alt="">
					<view class="">
						<span>你已取消报名</span>
						<span>2022.07.20 16:01:46</span>
					</view>
				</view>
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x.png" alt="">
					<view class="">
						<span>你已成功报名</span>
						<span>2022.07.20 15:01:46</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 未录取 -->
		<view class="progress" v-if="status==2">
			<view class="subsection">
				<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/weiluqu@2x.png" alt="">
			</view>
			<view class="subsection2" id="b4">
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2xdd.png" alt="">
					<view class="">
						<span>你未被录取</span>
						<span>2022.07.20 16:01:46</span>
					</view>
				</view>
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x.png" alt="">
					<view class="">
						<span>你已成功报名</span>
						<span>2022.07.20 15:01:46</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 已评价 -->
		<view class="progress" v-if="status==3">
			<view class="subsection">
				<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/yipingjia@2x.png" alt="">
			</view>
			<view class="subsection2" id="b3">
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x3.png" alt="">
					<view class="">
						<span>你评价了商家</span>
						<span>2022.07.22 19:01:46</span>
					</view>
				</view>
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x22.png" alt="">
					<view class="">
						<span>商家已“线上支付工资”</span>
						<span>2022.07.22 12:01:46</span>
					</view>
				</view>
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x22.png" alt="">
					<view class="">
						<span>恭喜你已经被成功录取</span>
						<span>2022.07.21 20:01:46</span>
					</view>
				</view>
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x2.png" alt="">
					<view class="">
						<span>你已成功报名</span>
						<span>2022.07.20 15:01:46</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 已结算 -->
		<view class="progress" v-if="status==4">
			<view class="subsection">
				<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/yijiesuan@2x.png" alt="">
			</view>
			<view class="subsection2" id="b2">
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x3.png" alt="">
					<view class="">
						<span>商家已“线上支付工资”</span>
						<span>2022.07.22 12:01:46</span>
					</view>
				</view>
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x22.png" alt="">
					<view class="">
						<span>恭喜你已经被成功录取</span>
						<span>2022.07.21 20:01:46</span>
					</view>
				</view>
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x2.png" alt="">
					<view class="">
						<span>你已成功报名</span>
						<span>2022.07.20 15:01:46</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 待录取 -->
		<view class="progress" v-if="status==5">
			<view class="subsection">
				<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/yibaoming@2x.png" alt="">
			</view>
			<view class="subsection2" id="b1">
				
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x.png" alt="">
					<view class="">
						<span>你已成功报名</span>
						<span>2022.07.20 15:01:46</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 已录取 -->
		<view class="progress" v-if="status==6">
			<view class="subsection">
				<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame288@2x.png" alt="">
			</view>
			<view class="subsection2" id="b2">
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x3.png" alt="">
					<view class="">
						<span>恭喜你已经被成功录取</span>
						<span>2022.07.21 20:01:46</span>
					</view>
				</view>
				<view class="">
					<img src="@/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x2.png" alt="">
					<view class="">
						<span>你已成功报名</span>
						<span>2022.07.20 15:01:46</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 已取消 -->
		<view class="progress" v-if="status==7">
			<view class="subsection">
				<img src="/subpageA/static/img/my_slices/jobProgress/subsetion/yiquxiao@2x.png" alt="">
			</view>
			<view class="subsection2" id="b2">
				<view class="">
					<img src="/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2xdd.png" alt="">
					<view class="">
						<span>你已经取消报名</span>
						<span>2022.07.21 20:01:46</span>
					</view>
				</view>
				<view class="">
					<img src="/subpageA/static/img/my_slices/jobProgress/subsetion/Frame263@2x2.png" alt="">
					<view class="">
						<span>你已成功报名</span>
						<span>2022.07.20 15:01:46</span>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		name:"jobProgressPresent",
		data() {
			return {
				
			};
		},
		props:{
			status:{
				//职位进展状态：已取消-1，未录取-2，已评价-3，已结算-4，待录取-5，已录取-6
				type:String,
				default:''
			}
		},
		created() {
			console.log(this.status)
		},
	}
</script>

<style scoped lang="scss">
	.jobProgressPresent{
		width: 622rpx;
		margin: 32rpx;
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		
		>span{
			font-size: 14px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #001A18;
		}
		
		.progress{
			
			.subsection{
				margin-top: 20rpx;
				text-align: center;
				>img{
					width: 622rpx;
					height: 92rpx;
				}
			}
			
			#b1{
				background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/4053d1b2-4c07-4271-8ad1-2517a454edcb.png');
			}
			#b2{
				background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/ef58d6a7-8752-4b96-a9bc-26ac4570cce0.png');
			}
			#b3{
				background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/07c93db9-fac4-4d94-beb1-2f93a88367cc.png');
			}
			#b4{
				background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/975190e3-03c6-4806-9870-5a719fabb59a.png');
			}
			
			.subsection2{
				
				
				width: 100%;
				box-sizing: border-box;
				padding:48rpx 32rpx 0;
				border-radius: 16rpx;
				
				background-repeat: no-repeat;
				background-size: 100%;
				
				
				>view{
					display: flex;
					>img{
						width: 18rpx;
						height: 112rpx;
					}
					>view{
						span:nth-of-type(1){
							display: block;
							margin-left: 10rpx;
							font-size: 14px;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #001A18;
						}
						span:nth-of-type(2){
							display: block;
							margin-left: 20rpx;
							font-size: 12px;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #505E5C;
						}
					}
					
				}
				
			}
		}
		
	}
</style>